<template>
  <div ref="odiv">
    我是儿子的内容
    {{ msg }}
    <!-- {{arr}} -->
    {{ num }}
    {{ chuan }}
    <button @click="fn">点我加1</button>
  </div>
</template>

<script>
export default {
  props: {
    chuan: {
      type: String,
      default: "hello world",
    },
  },
  data() {
    return {
      msg: "1909a",
      arr: [],
      num: 1,
    };
  },

  // 组件创建前
  beforeCreate() {
    // this.$refs.节点名称是获取dom节点的 ,this,dom 什么都没有
    console.log("beforeCreate", this.msg, this.$refs.odiv);
  },
  // 组件创建后，// 可以又this，没有dom
  created() {
    console.log("created", this.msg, this.$refs.odiv);
  },
  // dom挂载前 可以又this，没有dom
  beforeMount() {
    this.$bus.$on("gege", (data) => {
      console.log(data, "姐姐传递的");
    });
    console.log("beforeMonted", this.msg, this.$refs.odiv);
  },
  // dom 挂载后 ,既能得到this，又能得到dom
  mounted() {
    console.log("monted", this.msg, this.$refs.odiv);
    this.$axios.get("/list").then((res) => {
      console.log(res);
      this.arr = res.data;
    });
    // ---------------------
  },
  // 组件更新前
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  // 更新完毕后
  updated() {
    console.log("updated");
  },
  // 组件销毁前
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  // 组件销毁后
  destroyed() {
    console.log("destroyed");
  },
  methods: {
    fn() {
      this.num++;
      this.$bus.$emit("send", "我是子组件给父组件传递的值");
    },
  },
};
</script>

<style>
</style>